<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title简易选项卡</title>
	<style type="text/css">
		body {
			/*12号文字，1.5倍行高， Tahoma无衬线字体*/
			font: 12px/1.5 Tahoma;
		}	
		#outer {
			width: 400px;
			margin: 0 auto;
			font-size: 14px;
		}
	
		#tab {
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: black;
			border: 1px solid #000;
		}
		
		#tab li {
			float: left;
			color: white;
			width: 80px;
			height: 30px;
			list-style: none;
			line-height: 30px;
			text-align: center;
			cursor: pointer;
		}
		
		#tab li.current {
			background-color: lightgray;
			color: black;
		}
		
		#content {
			border: 1px solid #000;
			border-top: none;
		}
		
		#content ul {
			margin: 0 30px;
			padding: 10px 0;
			line-height: 200%;
			display: none;
		}
		
		#content ul:first-child {
			display: block;
		}
	</style>
</head>

<body>
	<div id="outer">
		<ul id="tab">
			<li class="current">第一节</li>
			<li>第二节</li>
			<li>第三节</li>
		</ul>
		<div id="content">
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
			</ul>
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
				<li>这是一段新闻7,新闻的标题7</li>
				<li>这是一段新闻8,新闻的标题8</li>
				<li>这是一段新闻9,新闻的标题9</li>
				<li>这是一段新闻10,新闻的标题10</li>
			</ul>
			<ul>
				<li>这是一段新闻1,新闻的标题1</li>
				<li>这是一段新闻2,新闻的标题2</li>
				<li>这是一段新闻3,新闻的标题3</li>
				<li>这是一段新闻4,新闻的标题4</li>
				<li>这是一段新闻5,新闻的标题5</li>
				<li>这是一段新闻6,新闻的标题6</li>
				<li>这是一段新闻7,新闻的标题7</li>
				<li>这是一段新闻8,新闻的标题8</li>
			</ul>
		</div>
	</div>

</body>

</html>
<script src="js/jquery.js"></script>
<script type="text/javascript">
	$('#tab li').click(function(){
		$(this).addClass('current').siblings().removeClass('current')
		var index = $(this).index()
		$('#content ul' ).eq(index).show().siblings().hide()
	})
</script>